<template>
  <div style="width:100%;height: 100%;background-color: #fff;">
    <div id="echart-div"></div>
  </div>
</template>
<script>
  // import echarts from 'echarts'
  import * as echarts from 'echarts';
  var charts = null
  export default {
    data() {

    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        charts = echarts.init(document.getElementById("echart-div"))
        var population = [


          { source: '欧盟', target: '欧盟 ', value: 300 },
          { source: '欧盟', target: '美国 ', value: 150 },
          { source: '欧盟', target: '中国 ', value: 103.5 },
          { source: '欧盟', target: '英国 ', value: 91.75 },
          { source: '欧盟', target: '澳大利亚 ', value: 41.75 },
          { source: '欧盟', target: '加拿大 ', value: 41.75 },
          { source: '欧盟', target: '印度 ', value: 16.75 },
          // { source: '欧盟', target: '日本 ', value: 16.75 },
          // { source: '欧盟', target: '韩国 ', value: 8 },
          // { source: '欧盟', target: '瑞士', value: 8 },

          { source: '美国', target: '欧盟 ', value: 171.75 },
          { source: '美国', target: '美国 ', value: 400 },
          { source: '美国', target: '中国 ', value: 103.5 },
          { source: '美国', target: '英国 ', value: 100 },
          { source: '美国', target: '澳大利亚 ', value: 41.75 },
          { source: '美国', target: '加拿大 ', value: 41.75 },
          { source: '美国', target: '印度 ', value: 16.75 },
          // { source: '美国', target: '日本 ', value: 16.75 },
          // { source: '美国', target: '韩国 ', value: 8 },
          // { source: '美国', target: '瑞士', value: 8 },

          { source: '中国', target: '欧盟 ', value: 103.5 },
          { source: '中国', target: '美国 ', value: 103.5 },
          { source: '中国', target: '中国 ', value: 300 },
          { source: '中国', target: '英国 ', value: 60 },
          { source: '中国', target: '澳大利亚 ', value: 41.75 },
          { source: '中国', target: '加拿大 ', value: 41.75 },
          { source: '中国', target: '印度 ', value: 16.75 },
          // { source: '中国', target: '日本 ', value: 16.75 },
          // { source: '中国', target: '韩国 ', value: 8 },
          // { source: '中国', target: '瑞士', value: 8 },

          { source: '英国', target: '欧盟 ', value: 91.75 },
          { source: '英国', target: '美国 ', value: 100 },
          { source: '英国', target: '中国 ', value: 60 },
          { source: '英国', target: '英国 ', value: 115.25 },
          { source: '英国', target: '澳大利亚 ', value: 41.75 },
          { source: '英国', target: '加拿大 ', value: 41.75 },
          { source: '英国', target: '印度 ', value: 16.75 },
          // { source: '英国', target: '日本 ', value: 16.75 },
          // { source: '英国', target: '韩国 ', value: 8 },
          // { source: '英国', target: '瑞士', value: 8 },



          { source: '澳大利亚', target: '欧盟 ', value: 41.75 },
          { source: '澳大利亚', target: '美国 ', value: 41.75 },
          { source: '澳大利亚', target: '中国 ', value: 41.75 },
          { source: '澳大利亚', target: '英国 ', value: 41.75 },
          { source: '澳大利亚', target: '澳大利亚 ', value: 41.75 },
          { source: '澳大利亚', target: '加拿大 ', value: 41.75 },
          { source: '澳大利亚', target: '印度 ', value: 16.75 },
          // { source: '澳大利亚', target: '日本 ', value: 16.75 },
          // { source: '澳大利亚', target: '韩国 ', value: 8 },
          // { source: '澳大利亚', target: '瑞士', value: 8 },


          { source: '加拿大', target: '欧盟 ', value: 41.75 },
          { source: '加拿大', target: '美国 ', value: 41.75 },
          { source: '加拿大', target: '中国 ', value: 41.75 },
          { source: '加拿大', target: '英国 ', value: 41.75 },
          { source: '加拿大', target: '澳大利亚 ', value: 41.75 },
          { source: '加拿大', target: '加拿大 ', value: 41.75 },
          { source: '加拿大', target: '印度 ', value: 16.75 },
          // { source: '加拿大', target: '日本 ', value: 16.75 },
          // { source: '加拿大', target: '韩国 ', value: 8 },
          // { source: '加拿大', target: '瑞士', value: 8 },


          { source: '印度', target: '欧盟 ', value: 16.75 },
          { source: '印度', target: '美国 ', value: 16.75 },
          { source: '印度', target: '中国 ', value: 16.75 },
          { source: '印度', target: '英国 ', value: 16.75 },
          { source: '印度', target: '澳大利亚 ', value: 16.75 },
          { source: '印度', target: '加拿大 ', value: 16.75 },
          { source: '印度', target: '印度 ', value: 16.75 },
          // { source: '印度', target: '日本 ', value: 16.75 },
          // { source: '印度', target: '韩国 ', value: 8 },
          // { source: '印度', target: '瑞士', value: 8 },


          { source: '日本', target: '欧盟 ', value: 16.75 },
          { source: '日本', target: '美国 ', value: 16.75 },
          { source: '日本', target: '中国 ', value: 16.75 },
          { source: '日本', target: '英国 ', value: 16.75 },
          { source: '日本', target: '澳大利亚 ', value: 16.75 },
          { source: '日本', target: '加拿大 ', value: 16.75 },
          { source: '日本', target: '印度 ', value: 16.75 },
          // { source: '日本', target: '日本 ', value: 16.75 },
          // { source: '日本', target: '韩国 ', value: 8 },
          // { source: '日本', target: '瑞士', value: 8 },

          { source: '韩国', target: '欧盟 ', value: 8 },
          { source: '韩国', target: '美国 ', value: 8 },
          { source: '韩国', target: '中国 ', value: 8 },
          { source: '韩国', target: '英国 ', value: 8 },
          { source: '韩国', target: '澳大利亚 ', value: 8 },
          { source: '韩国', target: '加拿大 ', value: 8 },
          { source: '韩国', target: '印度 ', value: 8 },
          // { source: '韩国', target: '日本 ', value: 8 },
          // { source: '韩国', target: '韩国 ', value: 8 },
          // { source: '韩国', target: '瑞士', value: 8 },

          { source: '中国香港', target: '欧盟 ', value: 8 },
          { source: '中国香港', target: '美国 ', value: 8 },
          { source: '中国香港', target: '中国 ', value: 8 },
          { source: '中国香港', target: '英国 ', value: 8 },
          { source: '中国香港', target: '澳大利亚 ', value: 8 },
          { source: '中国香港', target: '加拿大 ', value: 8 },
          { source: '中国香港', target: '印度 ', value: 8 },
          // { source: '中国香港', target: '日本 ', value: 8 },
          // { source: '中国香港', target: '韩国 ', value: 8 },
          // { source: '中国香港', target: '瑞士', value: 8 },


        ];

        let city = [
          {
            name: '欧盟',
            label: '欧盟',
            color: '#005687',
          },
          {
            name: '美国',
            label: '美国',
            color: '#6d030d',
          }, {
            name: '中国',
            label: '中国',
            color: '#ffac2a',
          }, {
            name: '英国',
            label: '英国',
            color: '#005687',
          }, {
            name: '澳大利亚',
            label: '澳大利亚',
            color: '#feac2a',
          }, {
            name: '加拿大',
            label: '加拿大',
            color: '#6d030d',
          }, {
            name: '印度',
            label: '印度',
            color: '#68685f',
          },
          //  {
          //   name: '日本',
          //   label: '日本',
          //   color: '#fcac2e',
          // }, {
          //   name: '韩国',
          //   label: '韩国',
          //   color: '#e8a742',
          // }, {
          //   name: '中国香港',
          //   label: '中国香港',
          //   color: '#e5a53f',
          // },




          {
            name: '欧盟 ',
            label: '欧盟',
            color: '#005687',
          },
          {
            name: '美国 ',
            label: '美国',
            color: '#6d030d',
          }, {
            name: '中国 ',
            label: '中国',
            color: '#ffac2a',
          }, {
            name: '英国 ',
            label: '英国',
            color: '#005687',
          }, {
            name: '澳大利亚 ',
            label: '澳大利亚',
            color: '#feac2a',
          }, {
            name: '加拿大 ',
            label: '加拿大',
            color: '#6d030d',
          }, {
            name: '印度 ',
            label: '印度',
            color: '#68685f',
          }
          // , {
          //   name: '日本 ',
          //   label: '日本',
          //   color: '#fcac2e',
          // }, {
          //   name: '韩国 ',
          //   label: '韩国',
          //   color: '#e8a742',
          // }, {
          //   name: '瑞士',
          //   label: '瑞士',
          //   color: '#0f4e74',
          // }
        ];


        let citylist = []
        city.forEach((item, index) => {
          citylist.push(
            {
              name: item.name, label: item.label, itemStyle: { normal: { color: item.color } },
              label: {
                position: index > 6 ? 'right' : 'left'
              },
              itemStyle: {
                normal: {
                  color: item.color,
                  borderColor: "rgba(0, 0, 0, 1)",
                  borderWidth: 1
                }
              }
            }
          );
        })

        let data = [];

        for (var i = 0; i < population.length; i++) {
          var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: city[population[i].source], //获取起始节点的颜色属性
            },
            {
              offset: 1,
              color: city[population[i].target], //获取结尾节点的颜色属性
            },
          ]);
          data.push({
            source: population[i].source,
            target: population[i].target,
            value: population[i].value,
          });
        }



        let option = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
          },
          //4.0版本
          series: [
            {
              type: 'sankey',

              left: '10%',
              right: '10%',
              data: citylist,
              links: data,
              focusNodeAdjacency: 'allEdges',
              itemStyle: {
                borderWidth: 0,
                borderColor: '#fff',
              },
              lineStyle: {
                color: 'gradient',
                curveness: 0.5,
              },
              label: {
                normal: {
                  fontSize: '16',
                  color: '#212b43',
                },
              },
            },
          ],
        };
        charts.setOption(option, true);
        window.addEventListener('resize', () => {
          charts.resize()
        })
      }
    }
  }
</script>
<style scoped>
  #echart-div {
    width: 90%;
    height: 500px;
    margin-left: 5%;
    background-color: #fff;
  }
</style>